var click = document.querySelector(".click"),
  content = document.querySelector(".content"),
  content_box = document.querySelectorAll(".content_box"),
  top_info = document.querySelector(".top_info"),
  record_content_ul = document.querySelector(".record_content ul"),
  draw_num_span = document.querySelector(".draw_num span"),
  record_content = document.querySelector(".record_content"),
  degree = 60, // 每个区域多少度
  offOn = true, // 是否正在抽奖
  end_degree = 0, // 停留的度数
  deg_num = 10, // 转多少圈
  baseUrl = "http://student.0melon0.cn/index/wheel",
  top_num = 0,
  turn_num = 0, // 转了第几圈
  num = 5; // 抽奖次数

// 顶部抽奖记录
ajax(baseUrl + "/get_top_draw_record_list", function (res_data) {
  var data = res_data.data;
  for (let i = 0; i < 10; i++) {
    var li = document.createElement("li");
    var phone = data[i].phone.split("");
    phone.splice(3,4,"****");
    phone = phone.join("");
    li.innerText = `恭喜 ${phone}用户抽中${data[i].prize_name}`
    top_info.appendChild(li);
  }
  setInterval(() => {
    if (++top_num >= 10) {
      top_info.appendChild(top_info.firstElementChild.cloneNode(true));
      top_info.style.transition = "all 1s";
      top_info.style.transform = `translateY(-${top_num}00%)`;
      top_info.addEventListener("transitionend", function () {
        top_num = 0;
        top_info.style.transition = "none";
        top_info.style.transform = `translateY(-${top_num}00%)`;
        top_info.lastElementChild.remove();
      }, {
        once: true
      })
    } else {
      top_info.style.transition = "all 1s";
      top_info.style.transform = `translateY(-${top_num}00%)`;
    }
  }, 2000);
}, "get");

// 抽奖
ajax(baseUrl + "/get_prize_list", function (res1) {
  prize_list = res1.data.prize_list;
  draw_num_span.innerText = num; // 抽奖次数
  // 渲染数据
  content_box.forEach(function (obj, index) {
    obj.querySelector("p").innerText = prize_list[index].name;
    obj.querySelector("img").src = prize_list[index].diagram;
  })
  // 点击抽奖
  click.addEventListener("click", function () {
    if (num <= 0) {
      alert("已经没有抽奖次数了");
      return;
    }
    if (offOn) {
      draw_num_span.innerText = --num;
      offOn = false;
      click.style.cursor = "not-allowed";
      // content.style.transition = "";
      // content.style.transform = "translate(-50%, -50%) rotate(0deg)";
      ajax(baseUrl + "/draw?phone=18888888888", function (res2) {
        id = res2.data.bingo_prize_id;
        turn_num++;
        deg_rotate = 360 * deg_num * turn_num + id * degree;
        content.style.transition = "all 6s";
        content.style.transform = `translate(-50%, -50%) rotate(${deg_rotate}deg)`;
        content.addEventListener("transitionend", function () {
          offOn = true;
          click.style.cursor = "pointer";
          alert(prize_list[--id].name);
          var li = document.createElement("li");
          li.innerHTML = `
          <p>${dateFormat(new Date().getTime())}</p>
          <p>${prize_list[id].name}</p>
        `;
          record_content_ul.appendChild(li);
        }, {
          once: true
        })
      }, "get");
    }
  })
}, "get");

// 抽奖记录
ajax(baseUrl + "/get_draw_record_list?page_num=20", function (res_data3) {
  record_list = res_data3.data.draw_record_list;
  record_list.forEach(function (record_item) {
    // console.log(record_item)
    var li = document.createElement("li");
    li.innerHTML = `
      <p>${dateFormat(record_item.draw_time_stamp * 1000)}</p>
      <p>${record_item.prize_name}</p>
    `;
    record_content_ul.appendChild(li);
  })

  var page = 1;
  record_content.addEventListener("scroll", function () {
    if (record_content.scrollHeight == record_content.clientHeight + record_content.scrollTop) {
      // console.log(record_content.scrollHeight);
      // console.log(record_content.clientHeight);
      // console.log(record_content.scrollTop);
      page++;
      ajax(baseUrl + "/get_draw_record_list?page="+page,function(page_obj){
        record_list = page_obj.data.draw_record_list;
        // console.log(record_list);
        record_list.forEach(function (record_item) {
          var li = document.createElement("li");
          li.innerHTML = `
            <p>${dateFormat(record_item.draw_time_stamp * 1000)}</p>
            <p>${record_item.prize_name}</p>
          `;
          record_content_ul.appendChild(li);
        })
      },"get");
    }
  })
}, "get")
